<template>
  <div>
    <h1>发送ajax请求</h1>
    <button @click="handlerGet">get请求</button>
    <button @click="handlerPost">post请求</button>
    <button @click="handlerPut">put请求</button>
    <button @click="handlerPatch">patch请求</button>
    <button @click="handlerDelete">delete请求</button>
  </div>
</template>

<script>

export default {
  methods: {
    handlerGet() {
      // 获取全部数据
      // axios.get("http://localhost:3000/stus").then(result => {
      //      console.log(result);
      // })

      // axios.get("http://localhost:3000/stus/1001").then(result => {
      //      console.log(result);
      // })

      // 根据条件进行检索  参数以?的形式传递
      // axios.get("http://localhost:3000/stus?id=1001").then(result => {
      //      console.log(result);
      // })
      // 参数以配置的形式传递
      this.$http
        .get("http://localhost:3000/stus", {
          params: {
            id: 1001,
          },
        })
        .then((result) => {
          console.log(result);
        });
    },
    handlerPost() {
      this.$http
        .post("http://localhost:3000/stus", {
          id: "1005",
          name: "小强",
          age: 18,
        })
        .then((result) => {
          console.log(result);
        });
    },
    handlerPut() {
      this.$http
        .put("http://localhost:3000/stus/1005", {
          name: "小强1",
        })
        .then((result) => {
          console.log(result);
        });
    },
    handlerPatch() {
      this.$http
        .patch("http://localhost:3000/stus/1005", {
          name: "小强1",
        })
        .then((result) => {
          console.log(result);
        });
    },
    handlerDelete() {
      this.$http.delete("http://localhost:3000/stus/1005").then((result) => {
        console.log(result);
      });
    },
  },
};
</script>

<style></style>
